<template>
  <Dialog :title="title" :model-value="visible" width="1000px" :before-close="closeForm">
    <div style="text-align: right; padding-bottom: 10px" v-hasPermi="'post.set'">
      <el-button type="primary" size="default" @click="addPost">添加岗位</el-button>
    </div>
    <Table :data="posts" :columns="columns" style="width: 100%">
      <template #action="e">
        <BaseButton size="small" type="danger" :icon="dropIcon" circle @click="dropTitle(e.row)" />
      </template>
    </Table>
    <addEmpPost :emp-id="empId" :com-id="comId" v-model:visible="addVisible" @close="closeAdd" />
  </Dialog>
</template>

<script>
import { Table } from '@/components/Table/'
import * as empPostApi from '@/api/emp/empPost'
import Dialog from '@/components/Dialog/src/Dialog.vue'
import { useIcon } from '@/hooks/web/useIcon'
import { useUserStoreWithOut } from '@/store/modules/user'
import addEmpPost from './components/addEmpPost.vue'
import { hasPermission } from '@/directives/permission/hasPermi'
export default {
  components: {
    Table,
    Dialog,
    addEmpPost
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    empId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      dropIcon: useIcon({ icon: 'ep:delete' }),
      posts: [],
      title: '人员岗位',
      isPower: false,
      isRefresh: false,
      addVisible: false,
      columns: [
        {
          field: 'CompanyName',
          label: '公司名',
          align: 'left',
          minWidth: 200
        },
        {
          field: 'UnitName',
          label: '所属单位',
          align: 'left',
          minWidth: 200
        },
        {
          field: 'DeptName',
          label: '所属部门',
          align: 'left',
          minWidth: 200
        },
        {
          field: 'Post',
          label: '岗位名',
          align: 'left',
          minWidth: 200
        },
        {
          field: 'action',
          hidden: hasPermission('post.set') == false,
          label: '操作',
          align: 'left',
          slotName: 'action'
        }
      ]
    }
  },
  computed: {
    comId() {
      return useUserStoreWithOut().comId
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.load()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    addPost() {
      this.addVisible = true
    },
    dropTitle(row) {
      const title = '确认删除岗位 ' + row.CompanyName + '-' + row.Post + '?'
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await empPostApi.deletePost(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.isRefresh = true
      this.posts = this.posts.filter((c) => c.Id !== id)
    },
    closeAdd(isRefresh) {
      this.addVisible = false
      if (isRefresh) {
        this.isRefresh = true
        this.load()
      }
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('cancel', this.isRefresh)
    },
    async load() {
      this.posts = await empPostApi.gets(this.empId, this.comId)
    }
  }
}
</script>
